<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Lucifer</title>
</head>
<style>
    body {
        overflow: hidden;
        background-color: #00adb5;
        z-index: 1;
    }

    body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: conic-gradient(#edb1f1 4deg 20deg, #3490de 70deg 129deg, #9896f1 199deg 212deg, #8ef6e4 270deg 308deg);
        animation: conic-gradient-move 15s linear infinite;
        filter: blur(30px);
        overflow: hidden;
        z-index: -1;
    }

    @keyframes conic-gradient-move {
        0% {
            transform: rotateZ(0deg) scale(1.5);
        }

        100% {
            transform: rotateZ(360deg) scale(3);
        }
    }
</style>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
